<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
    <meta charset="UTF-8">
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/larsDes.css" />
    <title>Turniermaster</title>
</head>

<body>
    <div id="indexView" class="container-fluid">
        <!--Isabel-->
        <div class="col-sm-1"></div>
        <div class="col-sm-10 row">
            <div class="page-header">
                <h1>Turniermaster</h1>
            </div>
            <nav class="navbar navbar-default">
                <div>
                    <ul class="nav navbar-nav">
                        <li id="btn_homeView"><a><span class="glyphicon glyphicon-home"></span> Home</a>
                        </li>
                        <li id="btn_createView"><a>Turnier erstellen</a>
                        </li>
                        <li id="btn_joinView"><a>Turnier-Ansicht</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div id="homeView">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>

            </div>

            <div id="createView">
                <div class="col-sm-1"></div>
                <div class="col-sm-9">
                    <h2>Neues Turnier erstellen:</h2>
                    <form role="form" class="form-horizontal" id="form_createTournament">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Turniername:</label>
                            <div class="col-sm-10">
                                <input type="text" name="tf_tournamentName" class="form-control" placeholder="Name" required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Passwort:</label>
                            <div class="col-sm-10">
                                <input type="password" name="tf_password" class="form-control" placeholder="Passwort" required/>
                            </div>
                        </div>
                        <div id="competitorsList">
                            <!-- Inputfelder per JS eingefügt -->
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-default" id="btn_addCompetitor">Spieler hinzufügen</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-default">Turnier erstellen</button>
                            </div>
                            <button type="reset" class="btn btn-default col-sm-1">Reset</button>
                        </div>
                    </form>
                </div>
            </div>


            <div id="joinView">
                <div class="col-sm-1"></div>
                <div id="listofTournaments" class="col-sm-9">
                    <h3>Turnier beitreten oder Administrieren</h3>
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-2">Turnier:</label>
                            <div class="col-sm-8">
                                <select id="select_tournamentList" class="form-control">
                                    <option value="-1">bitte Turnier wählen...</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-default col-sm-2" id="joinTournament">Beitreten</button>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">Passwort:</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="password_admin_existing"/>
                            </div>
                            <button type="button" class="btn btn-default col-sm-2" id="adminExistingTournament">Verwalten</button>
                        </div>
                    </form>
                </div>
                <div class="col-sm-2"></div>
            </div>
        </div>
    </div>
    <div id="tournamentView" class="container-fluid">
        <div class="col-sm-3" id="changelog">
			<div class="list-group">
				<a class="list-group-item active">Letzte Änderung</a>
                <a class="list-group-item"></a>
            </div>
        </div>
        <div class="page-header">
            <h2>Turnier-Ansicht</h2>
        </div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#reiter">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" id="navbrandTournamentName">Turnier-Ansicht</a>
                </div>
                <div class="collapse navbar-collapse" id="reiter">
                    <ul class="nav navbar-nav">
                        <li id="reitTable" class="active"><a>Tabellensicht</a>
                        </li>
                        <li id="reitBaum"><a>Baumansicht</a>
                        </li>
                        <li id="reitPlatz"><a>Platzierungen</a>
                        </li>
                        <li id="btn_openModal" data-toggle="modal" data-target="#editModal"><a>Ergebnis eintragen</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="leaveTournament"><span class="glyphicon glyphicon-user"></span> Turnier verlassen</a>
                        </li>
                        <li><a id="quitTournament"><span class="glyphicon glyphicon-off"></span> Turnier beenden</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="row">
            <div class="col-sm-9">
                <div id="umgebung_tabelle"></div>
                <div id="umgebung_baum">
                    <h1>Baum</h1>
                </div>
                <div id="umgebung_platzierung">
                    <table class="table" id="platzTable">
                        <caption>Platzierung</caption>
                        <thead>
                            <tr>
                                <th>Platz</th>
                                <th>Spieler</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            
        </div>
    </div>
    <!--Bootstrap modal als PopupFenster-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">Schließen</button>
                    <h4 class="modal-title" id="editModalLabel">Ergebnis eintragen</h4>
                </div>
                <div class="modal-body">
                    
                        <div id="editGame">
                            <select id="gamesSelection"></select>
                            <div id="msgEdit">
                                <p class="help-block">Wähle ein Spiel aus</p>
                            </div>
                            <label for="scoreP1" id="labelPlayer1">Spieler 1</label>
                            <input type="number" value="0" class="form-control" id="scoreP1" />
                            <label for="scoreP2" id="labelPlayer2">Spieler 2</label>
                            <input type="number" value="0" class="form-control" id="scoreP2" />
                        </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btn_setScore">Ergebnis speichern</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="errorMessage" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">Schließen</button>
                    <h4 class="modal-title" id="myModalLabel">Fehler:</h4>
                </div>
                <div class="modal-body">
                    <a></a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/indexView.js"></script>
    <script type="text/javascript" src="js/client.js"></script>
</body>

</html>